<template>
  <div class="sp">
    <section style="margin-bottom: 50px">
      <Table
        :tableData="paneB.tableDataF"
        selection
        @btnClick="
          dialogVisible = true
          changeImg()
        "
      ></Table>
      <Pagination :total="paneB.tableDataF.row.length" />
    </section>

    <el-dialog
      title="流程"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body
    >
      <img style="width: 100%" :src="img" alt="" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      img: require('../img/1.jpg'),
      paneB: {
        tableDataF: {
          col: [
            {
              prop: 'colA',
              label: '订单编号'
            },
            {
              prop: 'colB',
              label: '客户名称'
            },
            {
              prop: 'colC',
              label: '业务名称'
            },
            {
              prop: 'colD',
              label: '状态'
            },
            {
              prop: 'colE',
              label: '创建时间'
            },
            {
              prop: 'colF',
              label: '操作',
              type: 'Button',
              btnList: [
                {
                  label: '查看流程图'
                }
              ]
            }
          ],
          row: [
            {
              colA: 'D566238',
              colB: '方宇集团',
              colC: 'PCC策略局数据',
              colD: '开通中',
              colE: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
            },
            {
              colA: 'D566237',
              colB: '耕升公司',
              colC: 'PCC策略局数据',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D566236',
              colB: '利来集团',
              colC: 'PCC策略局数据',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D566235',
              colB: '美孚公司',
              colC: 'PCC策略局数据',
              colD: '开通中',
              colE: '2020-11-12'
            },
            {
              colA: 'D566234',
              colB: '盛运公司',
              colC: 'PCC策略局数据',
              colD: '开通中',
              colE: '2020-11-12'
            }
          ]
        }
      }
    }
  },

  methods: {
    changeImg() {
      let img2 = require('../img/2.jpg')
      let img3 = require('../img/3.jpg')
      let img4 = require('../img/4.jpg')
      setTimeout(() => {
        this.img = img2
      }, 3000)
      setTimeout(() => {
        this.img = img3
      }, 6000)
      setTimeout(() => {
        this.img = img4
        this.paneB.tableDataF.row[0].colD = '已归档'
      }, 9000)
    }
  }
}
</script>

<style lang="scss" scoped></style>
